// MessageDialog.qml
// 高自由度提示弹窗（带淡出动画、可自动关闭、并保持居中）
import QtQuick 2.15                    // 基础 QML 元素（矩形、文本、Timer 等）
import QtQuick.Controls 2.15           // Controls (Popup, Button 等)

Popup {                                 // 使用 Popup 做为弹窗的基类（轻量、可模态）
    id: dialog                          // 组件内部引用名为 dialog

    // 模式与焦点控制
    modal: true                         // 模态：弹窗显示时阻止背后元素接收输入事件
    focus: true                         // 打开时获取键盘焦点
    visible: false                      // 初始不可见（通过 open() / show() 打开）

    // ========== 可配置属性（供外部使用） ==========
    property string titleText: "提示"    // 标题文本（可从外部 set）
    property string messageText: ""     // 主体文本（可从外部 set）
    property string confirmText: "确定"  // 确认按钮文本（可定制）
    property color bgColor: "#2B2B2B"   // 弹窗背景颜色
    property color titleColor: "#00BFFF"// 标题颜色
    property color textColor: "#FFFFFF" // 文本颜色
    property int cornerRadius: 12       // 背景圆角
    property real dialogWidth: parent ? parent.width * 0.5 : 400 // 宽度（默认50%或400）
    property real dialogHeight: 180     // 高度（可调）
    property int autoCloseDelay: 3000   // 自动关闭延迟，毫秒（0 表示不自动关闭）

    // ========== 布局与尺寸 ==========
    width: dialogWidth                  // 根据上面属性设置宽度
    height: dialogHeight                // 根据上面属性设置高度

    // 居中关键：如果组件被放入某父项，就相对于父项居中；否则使用全局 Overlay.overlay 居中（兼容多种嵌入方式）
    // Overlay.overlay 来自 QtQuick.Controls 的 Overlay（当在 ApplicationWindow / 控件层次存在 overlay 时可用）
    anchors.centerIn: parent ? parent : Overlay.overlay

    // ========== 背景视觉（弹窗主体） ==========
    contentItem: Rectangle {              // Popup 的 background 用于绘制弹窗本体的矩形背景
        color: bgColor                   // 背景颜色可配置
        radius: cornerRadius             // 圆角
        border.color: "#555"             // 边框颜色（固定，可按需改）
        border.width: 1                  // 边框宽度
        opacity: 0.98                    // 略微不透明，显得更柔和
    }

    // ========== 可选蒙版（提示） ==========
    // 注意：Popup.modal = true 已阻止事件传递，但不自动绘制半透明遮罩。
    // 如果你希望有半透明遮罩，请在使用此组件的顶层（例如 ApplicationWindow）放置一个 Rectangle
    // 并在 dialog.open() 时把它 visible = true；dialog.close() 时 visible = false。
    // 这样做的好处是你能控制遮罩颜色/点击行为并保持复用性。
    //
    // 示例（放在主 QML 文件）：
    // Rectangle { id: dimmer; anchors.fill: parent; color: "black"; opacity: 0.4; visible: false }
    // 在调用弹窗前： dimmer.visible = true; alertDialog.open();
    // 在弹窗关闭后： dimmer.visible = false;
    //
    // 我这里不在组件内部强制添加遮罩，以免在不同场景下造成父子层次问题。

    // ========== 主体内容（标题 + 文本 + 按钮） ==========
    Column {
        id: contentColumn
        // 整体在 Popup 内居中显示
        anchors.centerIn: parent
        spacing: 12                         // 子控件垂直间距
        width: parent.width * 0.84          // 内容区宽度（留白）
        // height: parent.height * 0.9      // 高度按需要可调（通常不需要固定）

        // 标题行：较大的粗体
        Text {
            id: titleLabel
            text: dialog.titleText              // 绑定到 dialog.titleText 属性
            font.pixelSize: 20                  // 字体大小（像素为单位）
            color: dialog.titleColor            // 绑定颜色属性
            font.bold: true                     // 加粗
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
            wrapMode: Text.NoWrap               // 标题通常不换行
        }

        // 主体文本：支持换行显示
        Text {
            id: contentLabel
            text: dialog.messageText            // 绑定到 dialog.messageText 属性
            wrapMode: Text.Wrap                 // 内容自动换行
            color: dialog.textColor             // 正文颜色
            font.pixelSize: 16
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
            // 如果希望内容区固定高度并出现滚动，可把这里改为 Flickable + Column 组合
        }

        // 确认按钮（点击淡出）
        Button {
            id: confirmBtn
            text: dialog.confirmText            // 绑定到 dialog.confirmText
            anchors.horizontalCenter: parent.horizontalCenter
            width: 110                          // 按钮宽度
            height: 36                          // 按钮高度

            // 自定义按钮背景（使用 Rectangle 让样式更可控）
            background: Rectangle {
                anchors.fill: parent
                color: "#0078D7"                // 默认按钮色（可改）
                radius: 6
            }

            // 内容文本（按钮内部文本）
            contentItem: Text {
                text: confirmBtn.text
                color: "white"
                font.pixelSize: 15
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            // 点击确认：触发淡出动画（fadeOutAnim）
            onClicked: fadeOutAnim.start()
        }
    }
    // ========== 自动关闭定时器 ==========
    // 如果 autoCloseDelay > 0，调用 show() 会 restart 这个定时器，
    // 超时后会触发 fadeOutAnim 动画以淡出关闭弹窗。
    Timer {
        id: autoCloseTimer
        interval: autoCloseDelay           // 毫秒
        repeat: false                      // 单次计时
        onTriggered: {
            // 当自动关闭倒计时到时，启动淡出动画
            fadeOutAnim.start()
        }
    }

    // ========== 淡出动画（关闭动画） ==========
    // 使用 NumberAnimation 改变 Popup 的 opacity 实现淡出
    NumberAnimation {
        id: fadeOutAnim
        target: dialog
        property: "opacity"
        from: 1.0
        to: 0.0
        duration: 500                      // 0.5 秒淡出
        easing.type: Easing.InOutQuad      // 缓和曲线
        onStopped: {
            // 动画停止时真正关闭弹窗（close 会隐藏并触发 onClosed 等）
            dialog.close()
        }
    }

    // ========== 对外的便捷 show() 方法 ==========
    //使用set设置大小
    function set(Width, Height,Delay = 3000){
        dialogWidth = Width
        dialogHeight = Height
        autoCloseDelay = Delay
    }
    // 使用： alertDialog.show("标题", "文本")
    function show(title, msg) {
        // 将外部参数写入内部属性，供 UI 使用
        titleText = title
        messageText = msg

        // 确保完全可见
        opacity = 0.9

        // 打开弹窗（将 visible 设为 true 并显示）
        open()               // open() 在 Popup 中会展示弹窗（等价于 visible = true 且处理显示逻辑）
                             // open() 会触发焦点、模态行为等

        // 如果设置了自动关闭（autoCloseDelay>0），重新启动定时器
        if (autoCloseDelay > 0) {
            autoCloseTimer.stop()   // 先停止以重置时间
            autoCloseTimer.start()  // 启动新的倒计时
        }
    }

    // ========== onClosed 钩子（可选扩展） ==========
    // 当弹窗真正关闭时（无论是用户点击确认还是动画结束）可以在这里添加清理逻辑
    onClosed: {
        // 停止定时器（防止重复触发）
        autoCloseTimer.stop()
        // 恢复不透明度，避免下次打开时仍为 0（如果没有在 show() 里重置的话）
        opacity = 1.0
    }
}
